<template>
	<div>
		<title>使用Vue动画实现动画效果</title>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<!-- vue动画组件transition，transition解析后不展示该标签，元素一渲染默认动画开启appear -->
		<transition name="hello" appear>
			<!-- v-show显示与隐藏 -->
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>
</template>

<script>
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}

	/* 过来,vue动画规定名字v--enter-active，如果transition有name属性就是hello-enter-active */
	.hello-enter-active{
		/* 播放openvuecli动画，0.5s，linear匀速，过来 */
		animation: openvuecli 0.5s linear;
	}

	/* 离开,vue动画规定名字 */
	.hello-leave-active{
		/* 播放openvuecli动画，0.5s，linear匀速，reverse反转方向，离开 */
		animation: openvuecli 0.5s linear reverse;
	}

	/* 编写css动画 */
	@keyframes openvuecli {
		/* 来 */
		from{
			/* 从左边来 */
			transform: translateX(-100%);
		}
		/* 来到 */
		to{
			/* 来到后不动，0px */
			transform: translateX(0px);
		}
	}
</style>